<template>
    <div class="personal-container">
        <div class="title-bar">
            <div class="blue-line"></div>
            <span class="title">个人信息</span>
        </div>

        <div class="info-form">
            <div class="form-item">
                <label>头像：</label>
                <div class="avatar-upload">
                    <div class="upload-box">
                        <el-image :src="userInfo.avatar" :fit="fitType"
                            style="width: 80px; height: 80px; object-fit: contain"></el-image>

                    </div>
                    <div class="preview-box" v-if="userInfo.avatar">
                        <el-upload class="avatar-uploader" action="http://localhost:10086/users/users/upload"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="111" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                    </div>
                </div>
            </div>

            <div class="form-item">
                <label>账号：</label>
                <div class="info-value">{{ userInfo.username }}</div>
            </div>

            <div class="form-item">
                <label>姓名：</label>
                <div class="info-value">{{ userInfo.name }}</div>
            </div>

            <div class="form-item">
                <label>手机号码：</label>
                <input type="text" v-model="userInfo.phone" class="info-input" placeholder="请输入手机号码">
            </div>

            <div class="form-item">
                <label>部门：</label>
                <div class="info-value">{{ userInfo.dname }}</div>
            </div>

            <div class="form-item">
                <label>角色：</label>
                <div class="info-value">{{ userInfo.role }}</div>
            </div>

            <div class="form-item">
                <label>状态：</label>
                <div class="switch-wrapper">
                    <el-switch v-model="userInfo.status" active-color="#409EFF" inactive-color="#DCDFE6">
                    </el-switch>
                </div>
            </div>

            <div class="form-item">
                <label>备注：</label>
                <textarea v-model="userInfo.remark" class="remark-input" placeholder="请输入备注">
        </textarea>
            </div>

            <div class="form-footer">
                <button class="save-btn" @click="handleSave">保存</button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'PersonalInfo',
    data() {
        return {
            userInfo: {
                username: '',
                name: '',
                dname: '',
                role: '',
                avatar: '',
                phone: '',
                status: false,
                remark: ''
            },
            fitType: "contain", // 定义图片填充方式的变量，可根据需求调整
            img: {
                url: "",
                showUrl: ""
            }
        }
    },
    methods: {
        handleUpload() {
            // 处理上传逻辑
        },
        handleSave() {
            const users = {
                avatar: this.userInfo.avatar,
                phone: this.userInfo.phone,
                status: this.userInfo.status == true ? 1 : 0,
                remark: this.remark
            }
            // 处理保存逻辑
            axios.post('/api/users/users/update', users).then(res => {
                if (res.data.code == 200) {
                    this.$message.success('保存成功');
                } else {
                    this.$message.error('保存失败');
                }
            })
        },
        getUserInfo() {
            axios.get('/api/users/users/info').then(res => {
                this.userInfo = res.data.data;
                if (this.userInfo.status == 1) {
                    this.userInfo.status = true;
                } else {
                    this.userInfo.status = false;
                }
            })
        },
        handleAvatarSuccess(res, file) {
            this.img = res.data;
            this.userInfo.avatar = this.img.showUrl;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },

    },
    created() {
        this.getUserInfo()
    }
}
</script>

<style scoped>
.personal-container {
    padding: 20px;
    background: #fff;
    min-height: calc(100vh - 40px);
}

.title-bar {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.blue-line {
    width: 3px;
    height: 16px;
    background: #409EFF;
    margin-right: 8px;
}

.title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
}

.form-item {
    display: flex;
    margin-bottom: 20px;
}

.form-item label {
    width: 80px;
    text-align: right;
    margin-right: 12px;
    color: #606266;
    line-height: 32px;
}

.avatar-upload {
    display: flex;
    gap: 12px;
}

.upload-box {
    width: 80px;
    height: 80px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.upload-box i {
    font-size: 24px;
    color: #8c939d;
}

.preview-box {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
}

.avatar-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-value {
    line-height: 32px;
    color: #606266;
}

.info-input {
    width: 220px;
    height: 32px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 0 12px;
}

.switch-wrapper {
    display: flex;
    align-items: center;
}

.remark-input {
    width: 360px;
    height: 80px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 8px 12px;
    resize: none;
}

.form-footer {
    padding-left: 92px;
    margin-top: 30px;
}

.save-btn {
    width: 80px;
    height: 32px;
    background: #409EFF;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

.save-btn:hover {
    background: #66b1ff;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px #e4e4e4;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>